import { useNavBar } from '@/hooks'
import { View } from '@tarojs/components'
import './index.scss'

interface NavBarProps {
  title?: string
  color?: string
  isBack?: boolean
  children?: JSX.Element
}

export default function NavBar({ title, children }: NavBarProps) {
  const { navHeight, navTop, navWidth } = useNavBar()

  return (
    <>
      <View
        className="box"
        style={{
          height: navHeight + 'px',
          top: navTop + 'px',
          width: navWidth + 'px',
        }}
      >
        {title ? (
          <View className="title-box flex align-center justify-center">{title}</View>
        ) : (
          children
        )}
      </View>
      <View
        style={{
          height: navHeight + navTop + 'px',
          width: navWidth + 'px',
        }}
      ></View>
    </>
  )
}
